<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Java成绩管理系统-功能展示</title>
    <style>
        body { 
            max-width: 1000px; 
            margin: 30px auto; 
            font-family: "微软雅黑", sans-serif;
        }
        .menu {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
            cursor: pointer;
        }
        .code {
            background: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
            font-family: "Consolas", monospace;
            font-size: 14px;
            white-space: pre-wrap;
        }
        .result {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Java简易成绩管理系统-功能展示</h1>
    
    <!-- 功能菜单说明 -->
    <div class="menu">
        <h3>功能列表（对应你写的Java代码功能）</h3>
        <button onclick="showFunc1()">1. 输入学生成绩</button>
        <button onclick="showFunc2()">2. 显示所有学生成绩</button>
        <button onclick="showFunc3()">3. 计算学生总分和平均分</button>
        <button onclick="showFunc4()">4. 课程平均分/最高分/最低分</button>
        <button onclick="showFunc5()">5. 按总分从高到低排序</button>
        <button onclick="showFunc6()">6. 按课程成绩从低到高排序</button>
        <button onclick="showFunc7()">7. 统计优秀率和及格率</button>
    </div>

    <!-- 功能说明与结果展示 -->
    <div id="func1" class="result" style="display: none;">
        <h3>功能1：输入学生成绩</h3>
        <p>作用：输入学生数量（最多50）和每门课程的成绩（共5门）。</p>
        <p>模拟输入：假设输入3名学生，成绩如下：</p>
        <div class="code">
学生1：85 90 75 80 95
学生2：70 85 90 75 80
学生3：95 80 85 90 75
        </div>
        <button onclick="saveMockData()">模拟保存成绩</button>
    </div>

    <div id="func2" class="result" style="display: none;">
        <h3>功能2：显示所有学生成绩</h3>
        <p>作用：展示所有学生的5门课程成绩。</p>
        <div id="func2Result"></div>
    </div>

    <div id="func3" class="result" style="display: none;">
        <h3>功能3：计算学生总分和平均分</h3>
        <p>作用：计算每个学生的5门课总分和平均分。</p>
        <div id="func3Result"></div>
    </div>

    <div id="func4" class="result" style="display: none;">
        <h3>功能4：课程平均分/最高分/最低分</h3>
        <p>作用：统计每门课程的平均分、最高分、最低分。</p>
        <div id="func4Result"></div>
    </div>

    <div id="func5" class="result" style="display: none;">
        <h3>功能5：按总分从高到低排序</h3>
        <p>作用：把学生按总分从高到低排序后展示。</p>
        <div id="func5Result"></div>
    </div>

    <div id="func6" class="result" style="display: none;">
        <h3>功能6：按课程成绩从低到高排序</h3>
        <p>作用：选择一门课程，按该课程成绩从低到高排序。</p>
        <select id="courseSelect" onchange="sortByCourse()">
            <option value="0">课程1</option>
            <option value="1">课程2</option>
            <option value="2">课程3</option>
            <option value="3">课程4</option>
            <option value="4">课程5</option>
        </select>
        <div id="func6Result"></div>
    </div>

    <div id="func7" class="result" style="display: none;">
        <h3>功能7：统计优秀率（≥90）和及格率（≥60）</h3>
        <p>作用：计算每门课程的优秀率和及格率（百分比）。</p>
        <div id="func7Result"></div>
    </div>

    <script>
        // 模拟Java代码中的二维数组，存储成绩
        let scores = []; 
        let studentCount = 0;

        // 功能1：模拟输入成绩
        function showFunc1() {
            hideAll();
            document.getElementById('func1').style.display = 'block';
        }

        // 模拟保存成绩数据
        function saveMockData() {
            // 模拟3名学生的成绩
            scores = [
                [85, 90, 75, 80, 95],
                [70, 85, 90, 75, 80],
                [95, 80, 85, 90, 75]
            ];
            studentCount = 3;
            alert('模拟成绩保存成功！可以尝试其他功能了~');
        }

        // 功能2：显示所有学生成绩
        function showFunc2() {
            if (studentCount === 0) {
                alert('请先通过“功能1”模拟保存成绩！');
                return;
            }
            hideAll();
            let result = document.getElementById('func2Result');
            result.innerHTML = '<table><tr><th>学生</th><th>课程1</th><th>课程2</th><th>课程3</th><th>课程4</th><th>课程5</th></tr>';
            for (let i = 0; i < studentCount; i++) {
                result.innerHTML += `<tr>
                    <td>学生${i+1}</td>
                    <td>${scores[i][0]}</td>
                    <td>${scores[i][1]}</td>
                    <td>${scores[i][2]}</td>
                    <td>${scores[i][3]}</td>
                    <td>${scores[i][4]}</td>
                </tr>`;
            }
            result.innerHTML += '</table>';
            document.getElementById('func2').style.display = 'block';
        }

        // 功能3：计算学生总分和平均分
        function showFunc3() {
            if (studentCount === 0) {
                alert('请先通过“功能1”模拟保存成绩！');
                return;
            }
            hideAll();
            let result = document.getElementById('func3Result');
            result.innerHTML = '<table><tr><th>学生</th><th>总分</th><th>平均分</th></tr>';
            for (let i = 0; i < studentCount; i++) {
                let total = scores[i].reduce((a, b) => a + b, 0);
                let avg = (total / 5).toFixed(2);
                result.innerHTML += `<tr>
                    <td>学生${i+1}</td>
                    <td>${total}</td>
                    <td>${avg}</td>
                </tr>`;
            }
            result.innerHTML += '</table>';
            document.getElementById('func3').style.display = 'block';
        }

        // 功能4：课程平均分/最高分/最低分
        function showFunc4() {
            if (studentCount === 0) {
                alert('请先通过“功能1”模拟保存成绩！');
                return;
            }
            hideAll();
            let result = document.getElementById('func4Result');
            result.innerHTML = '<table><tr><th>课程</th><th>平均分</th><th>最高分</th><th>最低分</th></tr>';
            for (let j = 0; j < 5; j++) {
                let courseScores = scores.map(student => student[j]);
                let avg = (courseScores.reduce((a, b) => a + b, 0) / studentCount).toFixed(2);
                let max = Math.max(...courseScores);
                let min = Math.min(...courseScores);
                result.innerHTML += `<tr>
                    <td>课程${j+1}</td>
                    <td>${avg}</td>
                    <td>${max}</td>
                    <td>${min}</td>
                </tr>`;
            }
            result.innerHTML += '</table>';
            document.getElementById('func4').style.display = 'block';
        }

        // 功能5：按总分从高到低排序
        function showFunc5() {
            if (studentCount === 0) {
                alert('请先通过“功能1”模拟保存成绩！');
                return;
            }
            hideAll();
            // 模拟Java代码中的排序逻辑：先算总分，再排序
            let studentWithTotal = scores.map((s, i) => {
                let total = s.reduce((a, b) => a + b, 0);
                return { index: i, total: total, scores: s };
            });
            // 按总分降序排序
            studentWithTotal.sort((a, b) => b.total - a.total);

            let result = document.getElementById('func5Result');
            result.innerHTML = '<table><tr><th>排序</th><th>总分</th><th>课程1</th><th>课程2</th><th>课程3</th><th>课程4</th><th>课程5</th></tr>';
            for (let i = 0; i < studentWithTotal.length; i++) {
                let s = studentWithTotal[i];
                result.innerHTML += `<tr>
                    <td>${i+1}</td>
                    <td>${s.total}</td>
                    <td>${s.scores[0]}</td>
                    <td>${s.scores[1]}</td>
                    <td>${s.scores[2]}</td>
                    <td>${s.scores[3]}</td>
                    <td>${s.scores[4]}</td>
                </tr>`;
            }
            result.innerHTML += '</table>';
            document.getElementById('func5').style.display = 'block';
        }

        // 功能6：按课程成绩从低到高排序
        function showFunc6() {
            if (studentCount === 0) {
                alert('请先通过“功能1”模拟保存成绩！');
                return;
            }
            hideAll();
            document.getElementById('func6').style.display = 'block';
            sortByCourse(); // 初始化时先排序一次
        }

        function sortByCourse() {
            let course = document.getElementById('courseSelect').value;
            // 模拟Java代码中的排序逻辑：按选中课程成绩升序
            let studentWithCourse = scores.map((s, i) => {
                return { index: i, score: s[course], scores: s };
            });
            studentWithCourse.sort((a, b) => a.score - b.score);

            let result = document.getElementById('func6Result');
            result.innerHTML = `<table><tr><th>排序</th><th>课程${parseInt(course)+1}成绩</th><th>其他课程成绩</th></tr>`;
            for (let i = 0; i < studentWithCourse.length; i++) {
                let s = studentWithCourse[i];
                let otherScores = [];
                for (let j = 0; j < 5; j++) {
                    if (j != course) otherScores.push(s.scores[j]);
                }
                result.innerHTML += `<tr>
                    <td>${i+1}</td>
                    <td>${s.score}</td>
                    <td>${otherScores.join('、')}</td>
                </tr>`;
            }
            result.innerHTML += '</table>';
        }

        // 功能7：统计优秀率和及格率
        function showFunc7() {
            if (studentCount === 0) {
                alert('请先通过“功能1”模拟保存成绩！');
                return;
            }
            hideAll();
            let result = document.getElementById('func7Result');
            result.innerHTML = '<table><tr><th>课程</th><th>优秀率（≥90）</th><th>及格率（≥60）</th></tr>';
            for (let j = 0; j < 5; j++) {
                let courseScores = scores.map(student => student[j]);
                let excellent = courseScores.filter(s => s >= 90).length;
                let pass = courseScores.filter(s => s >= 60).length;
                let excellentRate = (excellent / studentCount * 100).toFixed(2);
                let passRate = (pass / studentCount * 100).toFixed(2);
                result.innerHTML += `<tr>
                    <td>课程${j+1}</td>
                    <td>${excellentRate}%</td>
                    <td>${passRate}%</td>
                </tr>`;
            }
            result.innerHTML += '</table>';
            document.getElementById('func7').style.display = 'block';
        }

        // 辅助函数：隐藏所有结果区域
        function hideAll() {
            let results = document.querySelectorAll('.result');
            results.forEach(r => r.style.display = 'none');
        }
    </script>
</body>
</html>